<template>
  <div class="registerPage">
    <!-- 关闭图标 -->
    <div class="close">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logoNew">
      <div class="cloud"></div>
      <div class="moon"></div>
      <span class="iconfont iconnew"></span>
    </div>
    <div class="inputDom">
      <AuthInput
        type="text"
        placeholder="用户名 / 手机号码"
        :regular="userRegular"
        err_msg="手机号错误"
        @changeVal="getUsername"
        focus="true"
        @submit="register"
      />
      <AuthInput
        type="text"
        placeholder="昵称"
        :regular="nickRegular"
        err_msg="昵称有误"
        @changeVal="getNickname"
        @submit="register"
      />
      <AuthInput
        type="password"
        placeholder="密码"
        :regular="pwdRegular"
        err_msg="密码错误"
        @changeVal="getPassword"
        @submit="register"
      />
    </div>
    <AuthButton ButtonType="注册" @submit="register" />
  </div>
</template>

<script>
// 导入输入框的子组件
import AuthInput from "../components/AuthInput";
// 导入按钮的子组件
import AuthButton from "../components/AuthButton";
export default {
  data() {
    return {
      username: "",
      nickname: "",
      password: "",
      userRegular: /^\d{5,11}$/,
      // nickRegular: /^\w{3,8}$/,
      nickRegular: /^[\u4e00-\u9fa5_\w]{2,6}$/,
      pwdRegular: /^\w{3,8}$/,
      focus: true,
    };
  },
  // 注册子组件
  components: {
    AuthInput,
    AuthButton,
  },
  methods: {
    // 处理用户数据的函数，将子组件获取输入框的数据存储在
    getUsername(username) {
      this.username = username;
    },
    getNickname(nickname) {
      this.nickname = nickname;
    },
    getPassword(password) {
      this.password = password;
    },

    // 触发注册点击按钮事件后处理数据
    register() {
      // console.log("注册提交");
      // 校验输入框内容为空
      // if (!this.username || !this.nickname || !this.password) {
      //   // 点击按钮触发 提示
      //   this.$toast.fail("用户名和昵称和密码不能为空");
      //   return;
      // } else
      // 必须使用正则表达式进行校验，理由是：防止对后面登录账号格式不对也能登录的问题
      if (
        !this.userRegular.test(this.username) ||
        !this.nickRegular.test(this.nickname) ||
        !this.pwdRegular.test(this.password)
      ) {
        this.$toast.fail("用户名和昵称和密码格式不对");
        return;
      } else {
        // 准备利用数据发送请求
        this.$axios({
          url: "/register",
          method: "post",
          data: {
            username: this.username,
            password: this.password,
            nickname: this.nickname,
          },
        })
          .then((res) => {
            // 发送请求成功的回调函数
            // console.log(res, 222);

            // if (res.data.statusCode === 400) {
            //   // 提示用户存在
            //   this.$toast.fail(res.data.message);
            //   return;
            // }
            if (res.data.message === "注册成功") {
              // 延时跳转
              setTimeout(() => {
                // 注册成功，跳转登录页也可以使用push跳转
                this.$router.replace({
                  path: "/login",
                  // name: "loginPage",
                });
              }, 800);
            }
          })
          .catch((err) => {
            // 请求错误的回调函数
            console.dir(err);
            // 提示系统错误
            this.$toast.fail("系统错误");
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.registerPage {
  padding: 30/360 * 100vw;
  .iconicon-test {
    font-size: 26/360 * 100vw;
  }
  .logoNew {
    position: relative;
    width: 300/360 * 100vw;
    height: 178/360 * 100vw;
    // text-align: center;
    // border: 1px solid #fff
    .iconnew {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 126/360 * 100vw;
      color: #cc3300;
      z-index: 2;
    }
    .cloud {
      position: absolute;
      left: 55/360 * 100vw;
      top: 60/360 * 100vw;
      width: 20/360 * 100vw;
      height: 20/360 * 100vw;
      border-radius: 10/360 * 100vw;
      background-color: #bf8d8d;
      z-index: 1;
      // 盒子阴影
      box-shadow: 6/360 * 100vw -2/360 * 100vw 0px 0px #bf8d8d,
        16/360 * 100vw -1px 0 #bf8d8d, 8/360 * 100vw 6/360 * 100vw 0 #bf8d8d,
        21/360 * 100vw 4/360 * 100vw 0 #bf8d8d, 28/360 * 100vw 1px 0 #bf8d8d,
        18/360 * 100vw -12/360 * 100vw 0 #ff5e00;
    }
    .moon {
      position: absolute;
      top: 46/360 * 100vw;
      left: 56/360 * 100vw;
      width: 50/360 * 100vw;
      height: 50/360 * 100vw;
      background-color: #fff;
      border-radius: 50%;
      transform: rotate(10deg);
      // top: 2.8888/100 * 360px;
      box-shadow: -10.8/360 * 100vw -3.6/360 * 100vw 0 10.4/360 * 100vw #aaa0a0;
    }
  }
}
</style>
